import React from "react";
import {Button, Card, Col, DatePicker, Form, Input, message, Popconfirm, Row, Spin, Table, Tooltip} from "antd";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {connect} from "dva";

const FormItem = Form.Item;
const {RangePicker} = DatePicker;

let pagingData = {
    _pageSize: 10,
    _current: 1,
    _total: 0,
};

@connect(({notificationModel}) => ({
    notificationModel,
}))
class Notification extends React.Component {
    state = {
        //-- 页面数据
        dataSource: [],
        //-- 加载层
        loading: false,
        //-- [true]: 显示搜索条件, [false]: 隐藏搜索条件
        showMoreSearchForm: false,
        //-- 选中的RowKeys
        selectedRowKeys: [],
        //-- 选中的Rows
        selectedRows: [],
    }

    componentDidMount() {
        this.findPageData();
    }

    /**
     * 查询页面数据
     */
    findPageData = function (params = {}) {
        const thisCtx = this;
        const {dispatch} = this.props;

        params.currentPage = pagingData._current;
        params.pageSize = pagingData._pageSize;
        console.log(params);
        thisCtx.setState({loading: true});
        dispatch({
            type: 'notificationModel/msgList',
            payload: params,
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    const paging = data.datas.pagination;
                    pagingData._current = paging.current + 1;
                    pagingData._pageSize = paging.pageSize;
                    pagingData._total = paging.total;
                    thisCtx.setState({
                        //-- 重置选中的行
                        selectedRowKeys: [],
                        selectedRows: [],
                        dataSource: data.datas.list,
                    });
                } else {
                    message.error('通知信息获取失败');
                }
            }
        });
    }

    handlerSubmit = (e) => {
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (err) {
                return;
            }
            if (values.createTime) {
                values.startDate = values.createTime[0].format('YYYY-MM-DD');
                values.endDate = values.createTime[1].format('YYYY-MM-DD');
                delete values.createTime;
            }
            pagingData._current = 1;
            this.findPageData(values);
        });
    };

    reset = () => {
        this.props.form.resetFields();
    };

    render() {

        const {getFieldDecorator} = this.props.form;

        const {loading, selectedRowKeys, dataSource} = this.state;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 5},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            },
        };

        const buttonsStyle = {
            style: {
                marginRight: '15px',
            },
        };

        const colLayout = {
            xs: 24,
            sm: 24,
            md: 12,
            lg: 8
        }

        /**
         * 表格选中事件
         */
        const rowSelection = {
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys: selectedRowKeys,
                    selectedRows: selectedRows,
                });
            },
        };

        return (
            <div>
                <Spin spinning={loading}>
                    <PageHeaderWrapper>
                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <Form {...formItemLayout} layout="horizontal">
                                <Row>
                                    <Col {...colLayout}>
                                        <FormItem label="接收时间">
                                            {getFieldDecorator('createTime', {})(
                                                <RangePicker
                                                    format={'YYYY-MM-DD'}
                                                    allowClear={true}
                                                />,
                                            )}
                                        </FormItem>
                                    </Col>
                                    <Col {...colLayout}>
                                        <FormItem>
                                            <Button type="primary" onClick={this.handlerSubmit}>
                                                查询
                                            </Button>
                                            <Button style={{marginLeft: 10}} onClick={this.reset}>
                                                重置
                                            </Button>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px', overflow: "auto"}}>
                            <Table
                                bordered
                                rowKey={data => `${data.id}`}
                                rowSelection={rowSelection}
                                columns={this.columns}
                                dataSource={dataSource}
                                pagination={{
                                    pageSize: pagingData._pageSize,
                                    current: pagingData._current,
                                    total: pagingData._total,
                                    onChange: (page) => {
                                        pagingData._current = page;

                                        this.findPageData();
                                    },
                                    showTotal: total => `共 ${total} 条数据`,
                                    style: {
                                        float: "left"
                                    }
                                }}
                            />
                        </Card>
                    </PageHeaderWrapper>
                </Spin>
            </div>
        );
    }

    /**
     * 表格列
     */
    columns = [
        {
            title: 'ID',
            align: 'center',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '名称',
            align: 'center',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '类型',
            align: 'center',
            dataIndex: 'mtypeName',
            key: 'mtypeName',
        },
        {
            title: '接收时间',
            align: 'center',
            dataIndex: 'sendTime',
            key: 'sendTime',
        },
        {
            title: '状态',
            align: 'center',
            dataIndex: 'rstatusName',
            key: 'rstatusName',
        },
        {
            title: '内容',
            align: 'center',
            dataIndex: 'content',
            key: 'content',
        },
    ]
}

export default Form.create()(Notification);
